//6.满意度--echarts
/*参数data:
  var data = {
    name:['1号', '2号', '3号', '4号', '5号', '6号', '7号','8号','9号','10号'],
    value:[96, 92, 94, 99, 90, 97,98,96,90,97]
  }
*/

var MD06 = {
  f1:12*KO,
  f2:16*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,data){
    if(el){
      this.W = el.offsetWidth;
      this.H = el.offsetHeight;
    }
    if(this.md){
      this.md.setOption({
        xAxis:{ data: data.name },
        series : [{ data: data.value }] 
      })
      return false;
    }else{
      this.myecharts(el,data)
    }
  },
  myecharts: function(el,data) {   
    // 指定图表的配置项和数据
    var option = {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#FFED27',
                    fontSize:this.f1,
                    color:'#001A53'
                }
            },
            textStyle:{
              fontSize:this.f2
            },
            formatter:'{b}<br>{a}：<span style="color:#FFED27;">{c}%</span>',
            padding:[5*KO,10*KO]
        },
        grid: {
          top: "21%",
          left: '6%', //折线框左边距
          right: '4%', //折线框右边距
          bottom: '13%', //折线框下边距
          // containLabel: true
        },
        xAxis: {
          type: 'category',       //类型，自定义数轴值
          boundaryGap: false,     //x轴内容区两端不留白
          data: data.name,           //x轴线数据
          axisLine:{              //x轴线线样式设置
            lineStyle:{
              color:'rgba(255,255,255,0.2)',   //x轴线线颜色
              width:1         //x轴线宽
            }
          },
          axisTick:{        //刻度样式设置
            interval:0,   //强制显示所有标签,设置为1则每隔一个标签显示，默认'auto'根据容器宽度自适应
            length:5*KO,    //刻度线长度
            lineStyle:{
              width:1   //刻度线宽度
            }
          },
          axisLabel:{       //刻度标签样式设置
            color:'transparent', //刻度标签字体颜色
            fontSize:this.f1,  //刻度标签字体大小
            margin:10*KO    //刻度标签与轴线之间的距离
          }
        },
        yAxis: {
          name:'窗口满意度',
          nameTextStyle: { //坐标轴名称样式
            color: "#A6CDFD",
            fontSize: this.f1,
            backgroundColor: "" //文字块背景色
          },
          nameGap: 15*KO, //坐标名称与轴线的距离
          type: 'value',
          // axisLine:{
          //   lineStyle:{
          //     color:'#fff',
          //     width:3
          //   }
          // },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisLabel:{
            color:'#e2e9ff',
            fontSize:this.f1
          }       
        },
        series : [{
              name:'满意率',
              type:'line',
              smooth: true,
              symbol:'emptyCircle',
              symbolSize:4*KO,    //拐点圆的大小  
              itemStyle: { //折线的样式设置
              normal: {
                color: '#009EE2',     //拐点圆的边框颜色
                  lineStyle: {          //折线线条的设置
                      color: '#009EE2',
                      width:1,
                  },
              },
            },    
            markPoint : {
              symbolSize:40*KO,
              data : [
                {type : 'max', name: '最大值',itemStyle:{normal:{color:'#009EE2'}},label:{fontSize:this.f1}},
                {type : 'min', name: '最小值',itemStyle:{normal:{color:'#962B3A'}},label:{fontSize:this.f1}}
              ]
            },     
            areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#005BA9' // 0% 处的颜色
                }, {
                    offset: 1, color: '#001952' // 100% 处的颜色
                }],
                global: false                   // 缺省为 false
            }             
                },
                data: data.value,
            }
        ]
    };

    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}


















